
<template>
    <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd" ref="scroller" :refresh="refresh">
        <div class="list_box" ref="cinemasList">
            <div class="cinemas_list_wrap" v-for="item in cinemaList" :key="item.id" @tap="$emit('cineam-detail-handler',item)" >
                <div class="cinema_title">
                <div class="cinema_nm">{{item.nm}}</div>
                <div class="cinema_price"><span>{{item.sellPrice}}</span><span>元</span><span>起</span></div>
                </div>
                <div class="cinema_addrs"><span >{{item.addr}}</span><span>{{item.distance}}</span></div>
                <div class="cinema_tag_wrpper"  >
                    <span  v-if="item.tag.allowRefund">退票</span>
                    <span  v-if="item.tag.endorse">改签</span>
                    <span  v-if="item.tag.snack">小吃</span>
                    <template v-if="item.tag.hallTypeVOList.length">
                        <span  v-for="(data,index) in item.tag.hallTypeVOList" :key="index">{{data.name}}</span>
                    </template>
                    <span v-if="item.tag.vipTag">{{item.tag.vipTag}}</span>
                </div>
                <div class="card" v-if="item.promotion.cardPromotionTag">
                    <img src="@/assets/images/card.png" alt=""><span>{{item.promotion.cardPromotionTag}}</span>
                </div>
            </div>
            <div style="text-align:center;padding:10px 0;">{{pullUpMsg}}</div>
        </div>
    </Scroller>
</template>
<script>
export default {
  props: ['cinemaList','refresh','pullUpMsg'],

  methods: {
      handleToScroll(pos) {
          this.$emit('scrolled')
          let ch = this.$refs.cinemasList.offsetHeight;
          let sh = this.$refs.scroller.$el.offsetHeight;
          let scrTop = ch - sh;
          this.$emit('pull-up-scroll',{pos,scrTop})
          
      },
      handleToTouchEnd(pos) {
          let ch = this.$refs.cinemasList.offsetHeight;
          let sh = this.$refs.scroller.$el.offsetHeight;
          let scrTop = ch - sh;
          this.$emit('pull-up-end',{pos,scrTop})
          
          
      }
  },
}
</script>
<style>
.cinemas_list_wrap{
    padding: 16px 15px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #666;
}

.cinema_title{
    vertical-align: sub;
    margin-bottom: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.cinema_nm{
    font-size: 16px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cinema_price span:first-child{
    font-size: 15px;
    color: #e54847;
}
.cinema_price span:nth-child(2){
    font-size: 12px;
    color: #e54847;
}
.cinema_price span:last-child{
    font-size: 12px;
    color: #666;
}
.cinema_addrs{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 12px;
}
.cinema_addrs span:first-child{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 20px
}
.cinema_tag_wrpper{
    display: flex;
    flex-direction: row;
    margin-top: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.cinemas_list_wrapper .cinema_tag_wrpper span{
    font-size: 12px;
    margin: 2px 2px;
    color: #17A8C2;
    border: 1px solid #17A8C2;
    border-radius: 2px;
    padding-left: 3px;
    padding-right: 3px
}
.cinema_tag_wrpper span:last-child{
    color: #FFB501;
    border:  1px solid #FFB501;
}

.cinema_dist{
    flex-shrink: 0;
    padding: 0 8px;
    font-size: 13px;
    color: #999;
}
.card{line-height: 16px;margin-top: 6px;}
.card img{width: 15px;height: 14px;font-size: 0;display: inline-block;vertical-align: middle;}
.card span{font-size: 12px;color: #999;display: inline-block;vertical-align: middle;margin-left: 5px}
</style>
